<!-- 新增规则 -->
<template>  
    <div v-if="dialogVisible" class="alert-dialog">  
      <div class="alert-dialog-content">  
        <h3>新增预警规则</h3>  
        <form @submit.prevent="handleSubmit">  
          <!-- 表单字段 -->  
          <div>  
            <label>规则名称:</label>  
            <input type="text" v-model="newAlertRule.ruleName" required>  
          </div>  
          <div>  
            <label>监控对象:</label>  
            <input type="text" v-model="newAlertRule.monitorObject" required>  
          </div>  
          <div>  
            <label>触发阈值:</label>  
            <input type="number" v-model="newAlertRule.triggerThreshold" required>  
          </div>  
          <div>  
            <label>预警级别:</label>  
            <select v-model="newAlertRule.alertLevel">  
              <option value="high">高</option>  
              <option value="medium">中</option>  
              <option value="low">低</option>  
            </select>  
          </div>  
          <div>  
            <label>设置时间:</label>  
            <input type="datetime-local" v-model="newAlertRule.setTime">  
          </div>  
          <div>  
            <label>备注:</label>  
            <textarea v-model="newAlertRule.remark"></textarea>  
          </div>  
          <button class="btn-primary" type="submit">提交</button>  
          <button class="btn-secondary" @click="closeDialog">取消</button>  
        </form>  
      </div>  
    </div>  
  </template>  

<script>  

export default {
    props: {  
    dialogVisible: {  
      type: Boolean,  
      default: false  
    },  
    
  },  
  data() {  
    return {  
      newAlertRule: { // 用于收集用户输入的数据对象  
        ruleName: '',  
        monitorObject: '',  
        triggerThreshold: null,  
        alertLevel: '',  
        setTime: '',  
        remark: ''  
      }  
    };  
  },  
  methods: {  
    handleSubmit() { 
     // 处理提交逻辑，比如发送请求或触发事件给父组件  
     this.$emit('submit', this.newAlertRule);  
      this.closeDialog();     
    },
    closeDialog() {  
      this.$emit('update:dialogVisible', false);  
    } 
  }  
};  
</script>  
<style scoped>  
.alert-dialog-wrapper {  
  position: fixed;  
  top: 0;  
  left: 0;  
  width: 100%;  
  height: 100%;  
  display: flex;  
  justify-content: center;  
  align-items: center;  
  background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */  
  z-index: 1000; /* 确保对话框在最顶层 */  
}  
  
.alert-dialog {  
  background-color: #fff;  
  border-radius: 5px;  
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);  
  padding: 20px;  
  max-width: 400px; /* 根据需要调整宽度 */  
}  
  
.alert-dialog-header {  
  margin-bottom: 20px;  
}  
  
.alert-dialog-body {  
  /* 可以根据需要添加更多样式 */  
}  
  
.form-group {  
  margin-bottom: 15px;  
}  
  
.form-group label {  
  display: block;  
  margin-bottom: 5px;  
}  
  
.btn {  
  display: inline-block;  
  padding: 8px 16px;  
  border: none;  
  border-radius: 4px;  
  cursor: pointer;  
  text-align: center;  
  text-decoration: none;  
  white-space: nowrap;  
}  
  
.btn-primary {  
  background-color: #4CAF50; /* 绿色 */  
  color: white;  
}  
  
.btn-secondary {  
  background-color: #e6e6e6; /* 灰色 */  
  color: black;  
}  
  
.error-message {  
  color: red;  
  margin-top: 10px;  
}  
</style>